<template>
    <fieldset>
        <legend>计数器</legend>
        <button @click="DECREMENT_NUM(5)">-</button>
        &nbsp;
        &nbsp;
        <b>{{num}}</b>
        &nbsp;
        &nbsp;
        <button @click="add">+</button>
        <h1>user:{{user}}</h1>

        <button @click="GET_PRODUCT(12)">点击获取购物车数据</button>
        <ul>
            <li v-for="item in products" :key="item.id">{{item.title}}</li>
        </ul>

        <h2>msg:{{$store.getters.reverseMsg}}</h2>
        <h2>msg:{{reverseMsg}}</h2>
    </fieldset>
</template>
<script>
    //如何使用vuex定义的state

    //1.使用store直接获取

    //2.辅助函数mapState

    //调用mutations中的方法

    //1.通过commit提交
    //2.通过辅助函数mapMutations调用

    //调用action的方法

    //1.通过dispatch进行调用

    //2.辅助函数mapActions

    //使用getters

    //1.$store.getters.xxx

    //2.辅助函数mapGetters

    import { mapState, mapMutations, mapActions,mapGetters } from "vuex"

    export default {
        //将状态映射到计算属性中(规律:结果放在计算属性,函数放在methods)
        computed: {
            ...mapState(['num', 'user','products','msg']),
            ...mapGetters(['reverseMsg'])
        },
        data() {
            return {

            }
        },
        mounted() {
            //console.log(this.$store.state.num=77777)
        },
        methods: {
            ...mapMutations(['DECREMENT_NUM']),
            add() {
                this.$store.commit('INCREMENT_NUM', 10)
            },
            // getCart() {
            //     this.$store.dispatch('GET_PRODUCT',20)
            // }
            ...mapActions(['GET_PRODUCT'])
        }

    }
</script>